<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="format-detection" content="telephone=no" />
    <!-- <link rel="stylesheet" href="/static/css/normalize.css" /> -->
    <link rel="stylesheet" href="/static/css/reset.css" />
    <link rel="stylesheet" href="/static/css/all.css" />
    <title>书城首页</title>
  </head>

  <body>
    <div id="app" style="overflow: hidden;" :style="{width:screen_width}" v-cloak>
      <!-- 书城 -->
      <%- include('include/header.html') %>
      <div style="height:100%;transition-duration: .5s;" :style="{width:double_screen_width,transform:'translate3d('+position+'px,0px,0px)'}">
        <div class="container-wrap" :style="{width:screen_width}" style="height: 100%; float: left;">
          <div class="container-scroll">
            <div class="y-scroll">
              <%- include('include/index-top.html') %>
              <%- include('include/index-hot.html') %>
              <%- include('include/index-recommend.html') %>
              <%- include('include/index-female.html') %>
              <%- include('include/index-male.html') %>
              <%- include('include/index-free.html') %>
              <%- include('include/index-bottom.html') %>
            </div>
          </div>
        </div>
        <!-- 书籍 -->
        <div style="height:100%;float:left;" :style="{width:screen_width}">
          <!-- TODO 头部固定 -->
          <div class="h100">
            <%- include('include/index-shelf.html') %>
          </div>
        </div>
      </div>
    </div>

    <script src="/static/script/vue.js"></script>
    <script src="/static/script/zepto.js"></script>
    <script src="/static/script/page/index.js"></script>
  </body>
</html>
